<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>props</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<!-- 引入prop-type 用于限制渲染标签属性的： 类型 必要性 -->
<script type="text/javascript" src="../js/prop-types.js"></script>

<script type="text/babel">
  /*
   需求: 自定义用来显示一个人员信息的组件，包含：姓名、年龄、性别三个信息
      1). 姓名须为字符串类型，且是必要信息
      2). 性别不是必须传递的  但是必须为字符串型  默认为男
      3). 年龄不是必须传递的  但是必须为数字类型  默认为18
  */
  //1.定义组件
  //使用ES6类定义组件
  class Person extends React.Component{

    // 限制标签传递属性时的： 必要性、类型
    static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number,
    sex: PropTypes.string,
  }
    // 指定默认值
    static defaultProps = {
    age: 18,
    sex: '不男不女',
  }
    state =  {}

    render() {
      let {name,age,sex} = this.props
      return (
        <ul>
          <li> 姓名：{name} </li>
          <li> 性别：{sex} </li>
          <li> 年龄：{age} </li>
        </ul>
      ) 
    }
  }

  let person = {name:'zhangsan', age:90, sex:'男'}

  ReactDOM.render(<Person {...person}/>, document.getElementById('example1'))
  //  三点运算符在es8 中  加入{}  代表新复制一个对象 原本是不能展开一个对象的 加了一个{}后 es8 新语法可以展开 
  
  // 限制标签传递属性时的： 必要性 类型
  //ReactDOM.render(<Person name = "kobe" age = {18} sex = "男"/>,document.getElementById('example1'))
  //ReactDOM.render(<Person name = "wede"/>,document.getElementById('example2'))

</script>

</body>
</html>

